<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ age }}
    <div v-html="html"></div>
    <div v-if="score>=90">奖励自行车一辆</div>
    <div v-else-if="score>=80">奖励羽毛球拍一副</div>
    <div v-else-if="score>=70">奖励一本图书</div>
    <div v-else-if="score>=60">奖励一个铅笔</div>
    <div v-else>什么也不奖励</div>

    <button @mouseover="count--">-</button>
    <span>{{ count }}</span>
    <button @mouseover="count++">+</button>

    <button @click="switchState">切换</button>
    <div v-show="isShow">李紫坤</div>


    <hr/>
    <button @click="subMoney(10)">饮料</button>
    <button @click="subMoney(20)">拉面</button>
    <div>余额还剩余：{{money}}</div>

    <br/>

    <div>小黑水果店</div>
    <ul>
        <li v-for="(item,index) in books">
            {{item}}
        </li>
    </ul>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            'age': 23,
            'html': `<a href="https://www.baidu.com">百度一下</a>`,
            'score': 90,
            'count': 1,
            'isShow': true,
            'money':400,
            'books':['自卑与超越','乌合之众','人性的弱点']
        },
        methods: {
            switchState() {
                this.isShow = !this.isShow
            },
            subMoney(count){
                if((this.money-count)<0){
                    alert('余额不足！')
                }
                this.money=this.money-count;
            }
        }
    })
</script>
